{% include 'front/header1.html' %}
<link rel="stylesheet" href="/resource/front/css/mobile/y-login.css" />
<link rel="stylesheet" href="/resource/front/css/mobile/mui.picker.css" />
<link rel="stylesheet" href="/resource/front/css/mobile/mui.poppicker.css" />
<link rel="stylesheet" href="/resource/front/css/mobile/mui.picker.min.css" />
<!--<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, maximum-scale=1.0" />
		<meta content="telephone=no" name="format-detection" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="/resource/front/css/mobile/style.min.css">
		<link rel="stylesheet" href="/resource/front/css/mobile/y-login.css" />
		<link rel="stylesheet" href="/resource/front/css/mobile/mui.css" />
		<link rel="stylesheet" href="/public/resource/front/css/mobile/style.csss" />
		<title>登录</title>-->
<style>
	body {
		margin: 0;
		padding: 0;
		background: #fff !important;
		position: relative;
		height: 100%;
	}
	
	.true-wrap {
		width: 7.36rem;
		text-align: center;
		height: 5.76rem;
		display: none;
		background: #fff;
		z-index: 1001;
		/*position: fixed;*/
		position: absolute;
		left: 50%;
		top: 50%;
		/*transform: translateY(-50%);*/
		transform: translate(-50%, -50%);
	}
	
	.true-wrap1 {
		width: 80%;
		text-align: center;
		height: 15rem;
		display: none;
		background: #fff;
		z-index: 1001;
		margin: auto;
		margin-top: 0.666666rem;
		/*position: absolute;*/
		/*transform: translateY(-50%);*/
		/*transform: translate(-50%, -50%);*/
	}
	
	.rigth-top {
		width: 0.69rem;
		height: 0.69rem;
		position: absolute;
		right: -.3rem;
		top: -.3rem;
	}
	
	.login-true {
		width: 1.11rem;
		height: 1.11rem;
		margin: 0.72rem auto 0;
	}
	
	.login-true-text {
		font-size: 0.48rem;
		color: rgba(51, 51, 51, 1);
		margin-top: 0.88rem;
	}
	
	.go-home {
		width: 5.33rem;
		height: 1.07rem;
		background: rgba(254, 225, 81, 1);
		border-radius: 0.07rem;
		font-size: 0.4rem;
		color: rgba(51, 51, 51, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin: .79rem auto;
	}
	
	#register input[type='password'] {
		line-height: 21px;
		width: 64%;
		height: 22px;
		margin-bottom: 0px;
		padding: 0px;
		-webkit-user-select: text;
		border: none;
		border-radius: 3px;
		outline: none;
		background-color: #fff;
		-webkit-appearance: none;
		padding-left: 15px;
	}
	
	select {
		padding: 0 6px;
		/*margin-top: 0.066666rem;*/
	}
	
	.input-wrap input {
		width: 95%;
		border: none;
    background: transparent;
	}
	
	.close1 {
		z-index: 1001;
		position: absolute;
	}
	.login-tab{
		display: flex;
		align-items: center;
		justify-content: space-around;
		
	}
</style>

</head>

<body>
	<div class="login-wrap" style="max-width: 600px; height: 100%; margin:0 auto ;position: relative;background: #fff !important;">
		<div class="login-banner">
			<img src="/resource/front/images/forward/05072.png" alt="">
		</div>
		<div>
			<div class="login-tab">
				<div class="res y-sel">
					注册
				</div>
				<div class="y-login">
					登录
				</div>
				<!--<a class="res y-sel">注册 </a>
				<span class="y-login">登录</span>-->
			</div>
			<!-- 注册 -->

			<div class="res-wrap div-tab" id="register">
				<div class="phone input-wrap">
					<input class="input1" type="text" field="user_name" required="true" id="phoner" errmsg="请输入您的手机号码" placeholder="请输入您的手机号码">
				</div>
				<div class="phonea input-wrap">
					<input type="text" field="phoneCode" required="true" errmsg="请输入验证码" placeholder="请输入验证码" style="width: 170px;">
					<div id="getcode1">获取验证码</div>
				</div>
				<div class="phone input-wrap">
					<input class="" type="password" field="password" style="width: 95%;" required="true" errmsg="请输入密码" placeholder="请输入密码">
				</div>
				<div class="phone input-wrap">
					<input class="input1" type="text" field="nick_name" required="true" errmsg="请输入您的名称" placeholder="请输入您的名称">
				</div>
				<!--<div class="phonea input-wrap" style="line-height: .95rem;">
					<select class="" style="width: 50%;" field="province" required="true" errmsg="请选择省" id="proid">

					</select>
					<select class="" style="width: 47%;" field="city" required="true" errmsg="请选择市" id="city">

					</select>
				</div>
				<div class="phonea input-wrap" style="line-height: .95rem;">
					<select class="" field="sex" required="true" errmsg="请选择性别" id="">
						<option value="1">男</option>
						<option value="2">女</option>
					</select>
				</div>
				<div class=" input-wrap" id="birthday" data-options='{"type":"date","beginYear":1949,"endYear":2050}' errmsg="请选择您的出生年月" style="line-height: .95rem; margin-top: 0.4rem; padding-left: 0.4rem;font-size: 0.373333rem;">
					<div id='age'>出生年月</div>
				</div>
				<div class=" input-wrap" id="showUserPicker" errmsg="请选择您的职业" style="line-height: .95rem;overflow: hidden; margin-top: 0.4rem; padding-left: 0.4rem;font-size: 0.373333rem;">
					<div id='zy' style="overflow: hidden;    text-overflow: ellipsis;white-space: nowrap;">请选择您的职业</div>
				</div>-->
				<!--<div class="phone input-wrap">
					<input class="input1" type="text" field="invitation" id="invitation"   errmsg="" placeholder="请输入您的邀请码">
				</div>-->
				<div id='userResult' class="ui-alert"></div>
				<div class="register-tool">
					<!--<label for="weuiAgree" class="weui-agree">
			            <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox">
			            <span>我已经仔细阅读并接受《政策查用户协议》 </span>
			        </label>-->
					<!--<input type="checkbox" id="check1" name="bugIDList" value="6" style="opacity: 0;">-->
					<input type="checkbox" id="check" name="bugIDList" value="6" style="">
					<span id="check2">我已经仔细阅读并接受《HYH链广告开放平台用户协议》 </span>
				</div>
				<button class="res-q wallte">管理我的钱包</button>
				<div class="res-text">
					登录浏览文章或广告，即刻赚钱，登录后每条广告都会自动打入您的账户里面，登录龙采校园或是HYH广告平台或合作应用方可提取。
				</div>
			</div>

			<!-- 注册 -->

			<!-- 登录 -->
			<div class="login-bottom-wrap div-tab" style="display: none">
				<div class="phone input-wrap input1" class="input1">
					<span>手机:</span>
					<input type="text"  id="phone" style="width: 65%; margin-bottom: 0;" placeholder="请输入您的手机号码">
				</div>
				<div class="phonea input-wrap">
					<span>验证码:</span>
					<input type="text" id="code" placeholder="请输入验证码" style="width: 160px;">
					<div id="getcode">获取验证码</div>
				</div>
				<button class="res-q" id="go-login">登录</button>
				<p class="go-login login"> 账号登录</p>
			</div>
			<!-- 登录 -->
		</div>

	</div>
	<div class="true-wrap">
		<img src="/resource/front/images/forward/delete.png" alt="" class="rigth-top">
		<img src="/resource/front/images/forward/true.png" alt="" class="login-true">
		<p class="login-true-text">登录成功</p>
		<div class="go-home">返回详情页</div>
	</div>
	<div class="xy" style="position: fixed;top: 0;right: 0;left: 0;bottom: 0; display: none;z-index: 999;">
		<img class="close1" src="/resource/front/images/forward/delete.png" style="top: calc(0.666666rem - 10px); right: calc(10% - 10px);width: 20px;" />
		<div class="true-wrap1" style="display: block; overflow-y: auto;">
			<img src="/resource/front/images/forward/xy.png" alt="" class="" style="width: 100%;">
		</div>
	</div>

	<div class="js_dialog" style="opacity: 1;display: none; ">
		<div class="weui-mask"></div>
	</div>
</body>
{% include 'front/foot.html' %}
<!--<script type="text/javascript" src="/resource/front/js/jquery.min.js"></script>
<script type="text/javascript" src="/resource/front/css/mobile/mui.js"></script>-->
<!--<script type="text/javascript" src="/resource/front/js/ykp.js"></script>-->
<script type="text/javascript" src="/resource/front/css/mobile/mui.picker.js"></script>
<script type="text/javascript" src="/resource/front/css/mobile/mui.picker.min.js"></script>
<script type="text/javascript" src="/resource/front/css/mobile/mui.poppicker.js"></script>
<script>
	window.onload = function() {
		var that = this;
		init()
		this.countdown = 59; //倒计时
		this.time = "";

		$('#getcode1').on('click', function() {
			getCode('#getcode1', '#phone1');
		})
		var mask = mui.createMask(function () {
				console.log(1)
			});
		$('#getcode').on('click', function() {
			getCode('#getcode', '#phone');
		})
		
		
		$(".login-tab div").click(function() {
			var index = $(this).index();
			$(this).addClass('y-sel').siblings().removeClass('y-sel')
			$('.div-tab').eq(index).show().siblings('.div-tab').hide()
		})

		getPro(); // 获取省市区
		$('.close').on('click', function() {
			$('.true-wrap').hide();
			$('.js_dialog').hide();
		})

		//		 data-options='{"type":"date","beginYear":1949,"endYear":2050}'
		//		console.log(new Date().getFullYear())
		$('#birthday').attr('data-options', '{"type":"date","beginYear":1949,"endYear":' + new Date().getFullYear() + '}');

		goLogin(); //跳转到账号登录
		//		this.goAvInfo(); //登录成功跳转到广告详情
//		handClickTime(); //点击职业
		register(); //注册
//		getTime(); //获取时间

		$('#proid').change(function() {
			getPro(2, $(this).val());
		})
		$('#check2').click(function() {
			mask.show();
			$('.xy').show();
			document.body.style.overflow = 'hidden';
		})
		$('.close1').click(function() {
			mask.close();
			$('.xy').hide();
			document.body.style.overflow = 'auto';
		})

		function getTime() {
			document.getElementById('birthday').addEventListener('tap', function() {
				var _self = this;
				if(_self.picker) {
					_self.picker.show(function(rs) {
						$("#age").text(res.value).attr('time', res.value)
						//					result.innerText = '选择结果: ' + rs.text;
						//					_self.picker.dispose();
						_self.picker = null;
					});
				} else {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					var id = this.getAttribute('id');
					/*
					 * 首次显示时实例化组件
					 * 示例为了简洁，将 options 放在了按钮的 dom 上
					 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
					 */
					_self.picker = new mui.DtPicker(options);
					_self.picker.show(function(res) {
						$("#age").text(res.value).attr('time', res.value)
						//					result.innerText = '选择结果: ' + rs.text;
						_self.picker.dispose();
						_self.picker = null;
					});
				}

			}, false);
		}

		function register() {
			$('.wallte').click(function() {
				var data = ykp.getFormCode({
					el: "#register"
				});
				if(!data) {
					return false;
				}

//				if(!$('#age').attr('time')) {
//					mui.toast("请选择年月");
//					return false;
//				} else {
//
//				}
//				var time = $('#age').attr('time').split('-');
//				data['birthday_year'] = time[0];
//				data['birthday_month'] = time[1];
//				data['birthday_day'] = time[2];
//
//				if(!$('#zy').attr('zy')) {
//					mui.toast("请选择职业");
//					return false;
//				}
//				var time = $('#zy').attr('zy').split('.');
//				data['job_one'] = time[0];
//				data['job_two'] = time[1];
//				data['job_three'] = time[2];
				if(!$('#check').is(':checked')) {
					mui.toast("请同意阅读协议");
					return false;
				}
				var params = ykp.GetRequest();
				params.invitation ? data['invitation'] = params.invitation : "";
				ykp.doAjax({
					url: "/api/register/h5_reg",
					method: "post",
					data: data,
					success: function(res) {
						if(res.code == 400) {
							mui.toast("注册失败" + res.msg);
							return false;
						}else if(res.code == 300){
							mui.toast(res.msg);
							return false;
						} else {
							mui.toast("注册成功");
							ykp.setLocalStorage("userInfo", JSON.stringify(res.data));
							window.location.href = "wallte"
						}
					}
				})
			})
		}

		function handClickTime() {
			var cityPicker3 = new mui.PopPicker({
				layer: 3
			});
			ykp.doAjax({
				url: "/api/common/get_job",
				method: "post",
				success: function(res) {
					var data = res.data;
					cityPicker3.setData(data);
					var showCityPickerButton = document.getElementById('showUserPicker');
					var cityResult3 = $('#userResult');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker3.show(function(items) {
							console.log(items)
							$('#zy').text(items[0].text + "/" + items[1].text + '/' + items[2].text).attr("zy", items[0].value + "." + items[1].value + '.' + items[2].value);
							//						cityResult3.innerText = "你选择的城市是:" + _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
				}
			})

		}

		function goLogin() {
			$('.go-login').click(function() {
				window.location.href = "login1"
			})
		}

		function goAvInfo() {
			$('.go-home').click(function() {
				if(ykp.getLocalStorage('suspension')){
					
					window.location.href = 'suspension_mobile?data=' + ykp.getLocalStorage('suspension');
				}else{
					window.location.href = 'advinfo_mobile' + ykp.getLocalStorage('avinfo');
				}
			})
		}

		function init() {
			$('#go-login').click(function() {

				if(!$('#phone').val()) {
					mui.toast("请输入手机号");
					return false;
				}

				if(!$('#code').val()) {
					mui.toast("请输入验证码");
					return false;
				}
				ykp.doAjax({
					url: "/api/login/login",
					method: "post",
					data: {
						user_name: $('#phone').val(),
						type: 2,
						phoneCode: $('#code').val()
					},
					success: function(res) {
						if(res.code == 400){
							mui.toast(res.msg);
							return false;
						}
						$('.true-wrap').show();
						$('.js_dialog').show();
						goAvInfo();
						mui.toast("登录成功");
						ykp.setLocalStorage("userInfo", JSON.stringify(res.data));
					}
				})
			})
		}

		function getCode(el) {

			var that = this;
			var phone = el == "#getcode1" ? "#phoner" : "#phone";
			if($(phone).val() && /^1(3|4|5|7|8|9)\d{9}$/.test($(phone).val())) {
				ykp.doAjax({
					url: "/api/common/send_msg",
					method: "post",
					data: {
						phone: $(phone).val()
					},
					success: function(res) {
						//						mui.toast("验证码发送成功")
					}
				})
				if(that.time) {
					return;
				}
				that.time = setInterval(() => {
					settime(el);
				}, 1000);
			} else {
				mui.toast("请输入正确的手机号码");
			}
		}

		function getPro(type, pid) {
			var html = "";
			ykp.doAjax({
				url: "/api/common/city",
				method: "post",
				data: {
					type: type || 1,
					pid: pid || 0
				},
				success: function(res) {
					var data = res.data;
					for(var i in data) {
						if(!type) {
							html += `<option value="${data[i].provinceid}">${data[i].province}</option>`;

						} else if(type == 2) {
							html += `<option value="${data[i].cityid}">${data[i].city}</option>`;
						}

					}

					type ? $('#city').html(html) : $('#proid').html(html)
					if(!type) {
						getPro(2, $('#proid').val())
					}
				}
			})

		}

		function settime(el) {
			var that = this;
			if(that.countdown == 0) {

				$(el).text("获取验证码");
				that.countdown = 60;
				clearInterval(that.time);
				that.time = "";
			} else {
				$(el).text("重新发送(" + that.countdown + ")");
				that.defaultText = "重新发送(" + that.countdown + ")";
				that.countdown--;
			}
		}
	}
</script>

</html>